<template>
    <div class="wrap flex res-wrap">
      <div class="search-res ">
          <div class="shadow-box">
              <div class="shadow-title flex res-title">
                  <h3>
                      搜索到与 <span class="im">“{{kw}}”</span> 相关的 <span class="im">“{{total}}”</span> 条结果
                  </h3>
                  <router-link to="name:home" >当前第<span class="im">“{{curPage}}”</span>页</router-link>
              </div>
              <hr>
              <div class="res-box">
                <div class="res-con flex" v-for="(item,i) in listData" :key="i">
                  <img :src="item.preImg" :alt="item.name">
                  <div class="right-con ">
                    <router-link class="tl" to="name:home">
                      <h3>
                        <router-link :to="{name:'detail',query:{name:item.name}}">{{item.name}}</router-link>
                      </h3>
                    </router-link>
                    <ul class="tl flex">
                      <li class="sign-colon">
                        <span>简介:</span>
                       {{item.des}}
                      <router-link class="go-link tr" :to="{name:'detail',query:{name:item.name}}">查看详情 &gt;</router-link>
                      </li>
                      <li class="half">
                        <span>副标题:
                          <router-link to="name:home">{{item.commendInfo}}</router-link>
                        </span>
                      </li>
                       <li class="half">
                        <span>语言:
                         {{item.language}}
                        </span>
                      </li>
                       <li class="half">
                        <span>更新时间:
                          <router-link to="name:home"> {{new Date(item.created_at).toLocaleDateString()}}</router-link>
                        </span>
                      </li>
                       <li class="half">
                        <span>类型:</span>
                        <router-link :to="{name:'channel'}">
                            {{item.tags[0].name}}                          
                        </router-link>
                      </li>
                       
                    </ul>
                    <!-- 播放列表 -->
                    <div class="search-list flex">
                      <router-link :to="{name:'play'}" v-for="i in 3" :key="i">{{i}}</router-link>
                    </div>
                  </div>
                  <hr>
                </div>
              </div>
              <!-- 分页数 -->
              <div class="block">
                <el-pagination
                  @current-change="changePage"
                  :current-page.sync="curPage"
                  :page-size="4"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
            </div>
          </div>
      </div>
      <div class="rec-side">
          <div class="shadow-box">
              <div class="shadow-title flex">
                  <h3>
                      推荐专题
                  </h3>
                  <router-link to="name:home">更多</router-link>
              </div>
          </div>
      </div>
    </div>
</template>
<style lang="scss">
.wrap.res-wrap {
  margin-top: 70px;
  align-items: flex-start;
  .res-title {
    padding-bottom:5px;
  }
  // 搜索结果
  .im {
    color:#2fb3ff;
  }
  .search-res {
    overflow: hidden;
    width: 860px;
    hr {
      margin:10px auto;
      width:100%;
    }
    .res-box {
      .res-con {
        justify-content: space-between;
        padding-top:10px;
        flex-wrap:wrap;
        align-items: flex-start;
        li {
          position:relative;
          .go-link {
            position: absolute;
            width: 120px;
            right:0;
            top:0;
            background: linear-gradient(to right,rgba(255,255,255,0) 0,#fff 48%);
          }
        }
        img {
          display: block;
          width:162px;
          height:202px;
          background-image: linear-gradient(transparent,rgba(0,0,0,.5));
        }
        .right-con {
          margin-bottom:10px;
          width:668px;
          padding:0 30px;
          h3 {
            margin: 10px 0 20px;
            font-weight: 700;
            font-size: 18px;
          }
          ul {
            flex-wrap:wrap;
            justify-content: flex-start;
            li {
              margin-bottom:10px;
              width:100%;
              span {
                margin-right:10px;
                color:#999;
              }

            }
            .half {
              width:50%;
            }
          }
        }
      }
    }
  }
  // search播放列表
  .search-list {
    justify-content: flex-start;
    a {
      margin-right:8px;
      display: block;
      width:40px;
      height:38px;
      line-height: 38px;
      background: #f8f8f8;
      &:hover {
        color: #2a2a2a;
        background-color: #eaeaea;
      }
    } 
  }
}



</style>

<script>
import {search} from '../api/index'
export default {
  data() {
    return {
      curPage:1,
      total:0,
      listData:[],
      // 查询词
      kw:'',
    };
  },
  watch:{
  　'$route': function (to, from) {
　　　　// 拿到目标参数 to.query.id 去再次请求数据接口
        console.log(to,from)
　　　　this.changePage();
　　}
  },
  methods: {
    changePage() {
      this.kw=this.$route.query.kw;
      search({
        name:this.kw,
        page: this.curPage-1,
        pageSize: 5,
        tagId: '',
      }).then(res=>{
        this.listData=res.data.data;
        this.total=res.data.total;
      }).catch(err=>{
        console.log(err)
      });
    },
  },
  mounted() {
    this.changePage();
  },
  created() {
    //  查询词/页数
  },
};
</script>
